<template>
  <div class="LoginView">
    <img src="image/loginBackgroundImg.jpg"
         alt=""
         class="backgroundImg">
    <h1>欢迎来到癫痫医院后台管理系统</h1>
    <div class="loginMain">
      <img src="image/logo.jpg"
           alt=""
           class="logoImg">
    </div>
    <div class="login">
      <el-form :model="admin"
               label-width="200px"
               class="demo-dynamic">
        <el-form-item prop="adPhone"
                      label="用户名" :rules="[{ required: true, message: '用户名不能为空'}]">
          <el-input v-model="admin.adPhone"></el-input>
        </el-form-item>
        <el-form-item prop="adPwd"
                      label="密码" :rules="[{ required: true, message: '密码不能为空'}]">
          <el-input v-model="admin.adPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="login">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import {mapActions, mapGetters} from 'vuex'

export default {
  name: 'LoginView',
  data() {
    return {
      admin: {
        adPhone: "",
        adPwd: "",
      },
    }
  },
  methods: {
    ...mapActions(['loginSuccess']),
    login() {
      if (this.admin.adPhone && this.admin.adPwd) {
        this.$service.loginService.adminLogin(this.admin).then(res => {
          if (res.data.code == 1) {
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            //将登录用户信息存储到本地
            this.loginSuccess(res.data);
            this.$router.push('/hospital');
          } else {
            this.$message.error('账号或密码输入错误');
          }
        })
      } else {
        this.$message.error('请输入账号或密码');
      }
    }
  }
}
</script>

<style scoped lang="less">
.LoginView {
  width: 100%;
  overflow: hidden;

  .backgroundImg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
  }

  .loginMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200px;
    float: left;
    // overflow: hidden;

    .logoImg {
      width: 200px;
      height: 200px;
      border-radius: 100px;
      padding-top: 300px;
      padding-left: 1400px;
    }
  }
}

.login {
  margin-top: 350px;
  margin-left: 600px;
  width: 400px;
  float: left;

  .el-button {
    margin-left: 125px;
  }
}
</style>
